import React, { useState } from 'react';
import { 
  View, 
  Text, 
  TouchableOpacity, 
  StyleSheet, 
  ScrollView,
  Modal
} from 'react-native';

const DocumentTypeLengthModal = ({ 
  visible, 
  onClose, 
  onSubmit 
}: { 
  visible: boolean, 
  onClose: () => void, 
  onSubmit: (data: { type: string, style: string }) => void 
}) => {
  // 状态管理
  const [selectedType, setSelectedType] = useState('通用');
  const [selectedStyle, setSelectedStyle] = useState('通用');

  // 类型选项配置
  const typeOptions = [
    '通用', '文章', '报告', '小说', '作文', '自定义'
  ];

  // 风格选项配置
  const styleOptions = [
    '通用', '学术的', '有文采', '更专业', '幽默的', '口语化', '书面语', '自定义'
  ];
  
  const handleSubmit = () => {
    onSubmit({ 
      type: selectedType, 
      style: selectedStyle 
    });
    onClose(); // 关闭弹窗
  };
  
  return (
    <Modal
      visible={visible}
      transparent={true}
      animationType="slide"
      onRequestClose={onClose}
    >
      <View style={styles.modalOverlay}>
        <View style={styles.modalContent}>
          <View style={styles.header}>
            <TouchableOpacity onPress={onClose} style={styles.closeButtonContainer}>
              <Text style={styles.closeButton}>×</Text>
            </TouchableOpacity>
            <Text style={styles.title}>请选择全文类型/风格</Text>
          </View>
          
          {/* 类型选择区域 */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>类型</Text>
            <View style={styles.optionContainer}>
              {typeOptions.map((type) => (
                <TouchableOpacity
                  key={type}
                  style={[
                    styles.optionButton,
                    selectedType === type && styles.selectedButton
                  ]}
                  onPress={() => setSelectedType(type)}
                >
                  <Text style={[
                    styles.optionText,
                    selectedType === type && styles.selectedText
                  ]}>
                    {type}
                  </Text>
                </TouchableOpacity>
              ))}
            </View>
          </View>

          {/* 风格选择区域 */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>风格</Text>
            <View style={styles.optionContainer}>
              {styleOptions.map((style) => (
                <TouchableOpacity
                  key={style}
                  style={[
                    styles.optionButton,
                    selectedStyle === style && styles.selectedButton
                  ]}
                  onPress={() => setSelectedStyle(style)}
                >
                  <Text style={[
                    styles.optionText,
                    selectedStyle === style && styles.selectedText
                  ]}>
                    {style}
                  </Text>
                </TouchableOpacity>
              ))}
            </View>
          </View>
          
          {/* 确定按钮 */}
          <TouchableOpacity style={styles.confirmButton} onPress={handleSubmit}>
            <Text style={styles.confirmButtonText}>确定</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'flex-end',
  },
  modalContent: {
    backgroundColor: 'white',
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    paddingBottom: 30,
  },
  header: {
    position: 'relative',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 15,
    paddingTop: 20,
    marginBottom: 10,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  closeButtonContainer: {
    position: 'absolute',
    right: 15,
    top: 15,
    padding: 5,
  },
  closeButton: {
    fontSize: 24,
    color: '#666',
    fontWeight: 'bold',
  },
  section: {
    marginTop: 10,
    paddingHorizontal: 20,
    marginBottom: 20,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 15,
  },
  optionContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  optionButton: {
    backgroundColor: '#f0f0f0',
    borderRadius: 20,
    paddingVertical: 8,
    paddingHorizontal: 25,
    margin: 5,
  },
  selectedButton: {
    backgroundColor: '#2A7AFA',
  },
  optionText: {
    color: '#666',
    fontSize: 14,
  },
  selectedText: {
    color: 'white',
  },
  confirmButton: {
    backgroundColor: '#2A7AFA',
    marginHorizontal: 20,
    paddingVertical: 15,
    borderRadius: 8,
    alignItems: 'center',
    marginTop: 20,
  },
  confirmButtonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '500',
  },
});

export default DocumentTypeLengthModal; 